<template>
	<el-dialog v-model="menuVisible" :title="menuProps.title" :destroy-on-close="true" width="580px" draggable>
		<!-- hide-required-asterisk elementUI表单校验不显示小红星 -->
		<el-form
			label-width="100px"
			ref="ruleFormRef"
			label-suffix=" :"
			:rules="rules"
			:model="menuFormModel"
			:disabled="menuProps.isView"
			:hide-required-asterisk="menuProps.isView"
		>
			<el-form-item label="上级菜单" prop="parentId">
				<el-tree-select
					v-model="menuFormModel.parentId"
					:data="menuTreeData"
					check-strictly
					style="width: 100%"
					:render-after-expand="false"
					placeholder="请选择上级菜单"
				></el-tree-select>
			</el-form-item>
			<el-form-item label="菜单名称" prop="menu_name">
				<el-input v-model="menuFormModel.menu_name" placeholder="请填写菜单名称" clearable></el-input>
			</el-form-item>
			<el-form-item label="菜单别名" prop="name">
				<el-input v-model="menuFormModel.name" placeholder="请填写菜单别名" clearable></el-input>
			</el-form-item>
			<el-form-item label="路由地址" prop="path">
				<el-input v-model="menuFormModel.path" placeholder="请填写路由地址" clearable></el-input>
			</el-form-item>
			<el-form-item label="组件路径" prop="component">
				<el-input v-model="menuFormModel.component" placeholder="请填写组件路径" clearable></el-input>
			</el-form-item>
			<el-form-item label="图标" prop="icon">
				<!-- <el-input v-model="menuFormModel.icon" placeholder="请选择图标" clearable></el-input> -->
				<SelectIcon v-model:icon-value="menuFormModel.icon" />
			</el-form-item>
			<el-form-item label="排序" prop="order_num">
				<el-input-number
					v-model="menuFormModel.order_num"
					placeholder="请填写序号"
					clearable
					controls-position="right"
					:min="1"
				></el-input-number>
			</el-form-item>
			<el-form-item label="是否外链" prop="is_frame">
				<el-radio-group v-model="menuFormModel.is_frame" @change="changeLink">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="外链地址" prop="link_url" v-if="menuFormModel.is_frame == 1">
				<el-input v-model="menuFormModel.link_url" placeholder="请输入外链地址" clearable></el-input>
			</el-form-item>
			<el-form-item label="是否缓存" prop="is_keepAlive">
				<el-radio-group v-model="menuFormModel.is_keepAlive">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="显示状态" prop="is_hide">
				<el-radio-group v-model="menuFormModel.is_hide">
					<el-radio :label="1">隐藏</el-radio>
					<el-radio :label="0">显示</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否全屏" prop="is_full">
				<el-radio-group v-model="menuFormModel.is_full">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="menuVisible = false">取消</el-button>
				<el-button type="primary" v-show="!menuProps.isView" @click="handleSubmit"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="MenuDialog">
import { ref, reactive, toRefs, nextTick } from "vue";
import { addMenuApi, getMenuTreeApi, editMenuApi } from "@/api/modules/test/menu";
import { ElMessage, FormInstance } from "element-plus";
import { getCurrentInstance } from "vue";
import SelectIcon from "@/components/SelectIcon/index.vue";

interface menuParamProps {
	title: string; // 标题
	isView: boolean; // 是否是查看
	row: any;
	getTableList?: () => void;
}

const rules = reactive({
	parentId: [{ required: true, message: "请选择上级菜单", trigger: "blur" }],
	menu_name: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
	name: [{ required: true, message: "请填写别名", trigger: "blur" }],
	path: [{ required: true, message: "请填写路由地址", trigger: "blur" }],
	icon: [{ required: true, message: "请选择图标", trigger: "blur" }],
	order_num: [{ required: true, message: "请填写序号", trigger: "blur" }]
});
// dialog状态
const menuVisible = ref(false);

const menuFormModel = ref({
	parentId: "", //上级菜单
	menu_id: "",
	menu_name: "",
	// menu_type: "", // 默认菜单
	name: "", // 菜单别名
	path: "", //路由地址
	component: "", //组件路径
	icon: "",
	order_num: 0,
	is_frame: 0, // 是否外链 0否1是
	link_url: "", // 外链地址,
	is_keepAlive: 0, // 是否缓存 0否1是
	is_hide: 0, // 显示状态 0显示1隐藏
	is_full: 0 // 是否全屏 0否1是
});

const menuProps = ref<menuParamProps>({
	title: "新增",
	isView: false,
	row: {}
});

const changeLink = (val: number) => {
	menuFormModel.value.is_frame = val;
};

const menuTreeData = ref(<any>[]);

// 接收父组件参数
const acceptParams = async (params: menuParamProps) => {
	menuProps.value = { ...menuProps.value, ...params };
	if (!params.row.icon) menuFormModel.value.icon = "";
	menuVisible.value = true;

	const { data } = await getMenuTreeApi();
	menuTreeData.value = [
		{
			value: "0",
			label: "主目录",
			children: data
		}
	];

	menuFormModel.value = { ...params.row };
};

// 提交数据
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			// 调用请求接口
			if (menuProps.value.title == "新增") {
				await addMenuApi(menuFormModel.value);
			} else {
				// 修改
				await editMenuApi(menuFormModel.value);
			}

			ElMessage.success({ message: `${menuProps.value.title}成功！` });
			menuProps.value.getTableList!();
			menuVisible.value = false;
		} catch (error) {
			console.log(error);
		}
	});
};

defineExpose({
	acceptParams
});
</script>